<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>华富</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<style>
  html,body {
    font-size: 1.2rem;
    background: #ffffff;
    color: #333333 !important
  }

  .h10{
    width: 100%;
    height: 0.5rem;
    display: -webkit-box;
    clear: both;
    background: #f5f5f5
  }
    .aui-active .aui-bar-tab-label{
      color: #f5a51c
    }


    [v-cloak] {
        display: none;
    }
    header,.aui-bar,.aui-bar-nav{
      font-size: 1.2rem;
      color: #333 !important;
      background:#fff;
      box-shadow: 0rem 0rem 0.8rem 0rem
		rgba(126, 126, 126, 0.52);
    border-bottom: none;
    margin-top: 0 !important;
    }
    .aui-pull-left{
      font-size: 1.2rem;
    }
    .aui-pull-left .aui-iconfont{
      font-size: 1.2rem;

    }
    .aui-searchbar{
      background-color: transparent !important;
      height:4.4rem;
    }
    .aui-searchbar-input{
      height:2.8rem;
      line-height: 2.8rem;
      padding-left:0.9rem;
      margin: 0 0 0 3.3rem;
      border-radius: 0.3rem;
      position: relative;
    }

    .aui-bar-nav .aui-title{
      right: 4rem;
      left: 0rem;
    }
    body {background: #F6F6F9;color: #333;margin: 0 auto;font-weight: normal;}
    ul,ol{list-style: none;padding: 0px;margin: 0px;;}


    /*滚动条样式*/
    .scrollbar-none::-webkit-scrollbar {/*滚动条宽度设置*/
        width: 0px;height: 0;
    }
    header, .aui-bar-nav{
      padding-top:0;
    }
    .aui-searchbar .aui-iconfont{
      line-height: 2.8rem;
      margin-right: 1rem;
      color: #9e9e9e !important;
      font-size: 1.6rem;
    }
    .aui-searchbar-input input{
      height: 2.8rem;
      font-size: 1.3rem;
    }
    .aui-bar-nav .aui-pull-right.class_nav{
      top:1.3rem;
      right:1.3rem;
      padding:0;
      height:1.6rem;
      line-height: 1.6rem;
    }
    .aui-bar-nav .aui-pull-left.class_nav1{
      top:1.3rem;
      left:1.3rem;
      padding:0;
      height:1.7rem;
      line-height: 1.7rem;
    }
    .class_nav img{
      height:1.7rem;
    }
    .class_nav1 img{
      height:1.7rem;
    }
    .class_nav span{
      position: absolute;
      top: -0.5rem;
      right: -0.5rem;
      width: 1.2rem;
    	height: 1.2rem;
      line-height: 1.2rem;
    	background-color: #ed6a20;
      font-size:1rem;
      color:#fff;
      border-radius: 100%;
    }
    .class_nav_title .shao{
      position: absolute;
      width:1.3rem;
      top:0.75rem;
      right:0.75rem;
    }
    .con1{
      padding-top:6.9rem;
      background:#fafafa;
    }
    .fl{
      float:left;
    }
    .fr{
      float:right;
    }

    /*shopClassify_sec1*/
    .shopClassify_sec1{
      padding:1rem 1.3rem;
    }
    .shopClassify_sec1 ul li{
      width:100%;
      background-color: #ffffff;
    	box-shadow: 0rem 0.1rem 1.37rem 0.09rem
    		rgba(28, 28, 28, 0.06);
    	border-radius: 0.7rem;
      padding:1rem;
      margin-bottom: 1rem;
    }
    .shopClassify_sec1_title{
      font-size: 1.6rem;
    	line-height: 1;
    	letter-spacing: 0.03rem;
    	color: #333333;
    }
    .shopClassify_sec1_title i{
      float: right;
      font-size: 1.4rem;
      margin-top:0.1rem;
    }
    .shopClassify_sec1_txt{
      margin-top:1.2rem;
    }
    .shopClassify_sec1_txt span{
      min-width: 48%;
      font-size: 1.2rem;
    	line-height: 1;
    	letter-spacing: 0.03rem;
    	color: #4a4a4a;
      float:left;
      background-color: #f2f2f2;
	    border-radius: 0.7rem;
      padding:1.25rem 0.85rem;
      margin-right:2%;
      margin-bottom: 0.5rem;
    }
    /*shopClassify_sec1*/

</style>
<body>
<div id="app" style="position:relative;" v-cloak>

  <header id="header_top" class="aui-bar aui-bar-nav " style="position:fixed;top:0;height:6.9rem;padding-top:2.5rem;">

    <div class="aui-title class_nav_title">
      <div class="aui-searchbar" id="search">
          <div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()" style="background:#f6f6f6">
              <i class="aui-iconfont aui-icon-search"></i>
              <form action="javascript:search();">
                  <input type="search" placeholder="请输入搜索内容" id="search-input">
              </form>
              <div class="shao">
                <img src="../../image/search_icon1.png" alt="">
              </div>
          </div>

      </div>

    </div>
    <a class="aui-pull-right aui-btn class_nav">
        <img src="../../image/class/share_index_nav3.png" alt="">
        <span>5</span>
    </a>
    <a class="aui-pull-left aui-btn class_nav1" onclick="close_win()">
        <img src="../../image/back.png" alt="">
    </a>
  </header>
  <div class="aui-refresh-content">
    <div class="con1">
        <div class="shopClassify_sec1">
          <ul>
            <li @click="goClassify1">
              <div class="shopClassify_sec1_list">
                <div class="shopClassify_sec1_title">全部商品 <i class="aui-iconfont aui-icon-right"></i></div>
              </div>
            </li>
            <li v-for="item in msgList">
              <div class="shopClassify_sec1_list">
                <div class="shopClassify_sec1_title" @click="goClassify1(item.cate_id)">{{item.cate_name}} <i class="aui-iconfont aui-icon-right"></i></div>
                <div class="shopClassify_sec1_txt clearfix">
                  <span v-for="val in item.child_list" @click="goClassify1(val.cate_id)">{{val.cate_name}}</span>

                </div>
              </div>
            </li>
          </ul>
        </div>
    </div>
	</div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>

<script type="text/javascript">
var app;
function doSearch(){
    var searchValue = document.getElementById("search-input").value;
    if(searchValue){
        // api.toast({
        //     msg: searchValue,
        //     duration: 2000,
        //     location: 'bottom'
        // });

    }
}
  apiready = function(){

    app = new Vue({
        el: '#app',
        data: {
            msgList:[]
        },
        created: function() {
          api.showProgress({
              title: '努力加载中...',
              text: '先喝杯茶...',
              modal: false
          });

        },
        methods: {
          goClassify1:function(typeid){
            api.openWin({
                name: 'shopClassify1',
                url: './shop_classify1.html',
                pageParam: {
                    id:api.pageParam.id,
                    typeId:typeid || ""
                }
            });
          },
            //店铺分类
            classify:function(){
               var _this = this
               var data={
                  token:$api.getStorage('token'),
                  store_id:api.pageParam.id
               }
               api.ajax({
                   url: window.hurl.store_goods_cate_tree,
                   method: 'post',
                   data: {
                       values:data
                   }
               },function(ret, err){
                   if (ret) {
                      // console.log( JSON.stringify( ret ) );
                       _this.msgList = ret
                   } else {
                       console.log( JSON.stringify( err ) );
                   }
               });

            }
        },
        mounted: function () {
          api.hideProgress();
          tabNav();
          setRefresh();
          bannerSwiper();
          this.classify()
        }
      })

  }

  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {

          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }

  function tabNav() {
      var prevIndex = 1
      var tab1 = new auiTab({
          element: document.getElementById("tab1"),
          repeatClick: true
      }, function(ret) {
          if (ret.index == 1) {
              $('.shopClassify_nav .aui-tab-item').eq(3).removeClass('up, down');
          } else if (ret.index == 2) {
              $('.shopClassify_nav .aui-tab-item').eq(3).removeClass('up, down')
          } else if (ret.index == 3) {
              $('.shopClassify_nav .aui-tab-item').eq(3).removeClass('up, down')
          } else if (ret.index == 4) {
            if (prevIndex == ret.index) {
                $('.shopClassify_nav .aui-tab-item').eq(3).toggleClass('up')
                $('.shopClassify_nav .aui-tab-item').eq(3).toggleClass('down')
            } else {
                $('.shopClassify_nav .aui-tab-item').eq(3).addClass('up')
            }
          }
          prevIndex = ret.index
      });
  }

  function close_win(){
    api.closeWin({});
  }

  function goDetail(){
    api.openWin({
        name: 'classDetailHeader',
        url: './class_detail_header.html',
        pageParam: {
            test:''
        }
    });
  }


  function openFilter() {
        api.openFrame({
            name: 'classClassifyFilter',
            url: './class_classify_filter.html',
            pageParam:{

            }
        })
    }

  //店铺首页banner
  function bannerSwiper(){
    var bannerSwiper = new Swiper('#swiper_banner', {
        autoplay: 3000,
        loop: true,
        pagination: '.pagination_banner',
    })
  }

  /**/


</script>
